<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		/* html {
			font-size: 20px;
		} */

		.box {
			/* width: 200px;
			height: 200px; */
			/* background-color: #0f0; */
			/* width: 100vw;
			height: 100vh; */
		}

		/* .fu {
			width: 300px;
			height: 300px;
			background-color: #00f;
			font-size: 20px;
		} */

		/* .zi {
			width: 10em;
			height: 10em;
			width: 5rem;
			height: 5rem;
			background-color: #ccc;
		} */


		html {
			font-size: calc(100vw / 750);
			/* font-size: calc(100vw / 75); */
		}

		.head {
			height: 350rem;
			background-color: rgb(255, 73, 45);
			padding-top: 24rem;
		}

		.search>div {
			width: 710rem;
			background-color: #fff;
			height: 66rem;
			margin: 0 auto;
			border-radius: 33rem;
			display: flex;
			align-items: center;
			padding-left: 30rem;
		}

		.search input {
			margin-left: 20rem;
			height: 50rem;
			width: calc(100% - 100rem);
			border: 0;
			outline: 0;
		}

		.nav {
			overflow: auto;
			margin-top: 50rem;
		}

		ul {
			display: flex;
			width: 1350rem;
		}

		ul>li {
			list-style: none;
			width: 90rem;
			height: 100rem;
			background-color: red;
			border: 1rem solid #ccc;
			font-size: 30rem;
			position: relative;
		}

		li>div {
			width: 60%;
			height: 5rem;
			background-color: #fff;
			position: absolute;
			bottom: 5rem;
			left: 20%;
			display: none;
		}

		li:hover>div {
			display: block;
		}

		::-webkit-scrollbar {
			height: 0;
		}
	</style>

	<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4809951_24fpl6smhf6.css">
</head>

<body>
	<!-- 移动端布局 -->
	<!-- 固定布局 -->
	<!-- px % vh vw em rem -->


	<!-- <div class="box"></div>

	<div class="fu">
		<div class="zi"></div>
	</div> -->


	<!-- 移动端布局   手机屏 -->
	<!-- psd 750 -->
	<!-- 6.7寸   375  414 -->

	<!-- input  710  750 -->
	<!-- input   ?   414 -->
	<!-- 710/750 * 100vw -->

	<!-- px % em:参照父级的font-size比例  rem:参照根元素html的font-size比例 -->

	<div class="head">
		<div class="search">
			<div>
				<div>
					<i class="iconfont icon-sousuo"></i>
				</div>
				<input type="text" placeholder="西裤">
			</div>
		</div>

		<div class="nav">
			<ul>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>
				<li>11
					<div></div>
				</li>

			</ul>
		</div>
	</div>



</body>

</html>